<template>
  <div class='course-video'>
    <!-- 导航 -->
    <van-nav-bar
      title="视频"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!-- 设置视频容器 -->
    <div id="player-con"></div>
  </div>
</template>

<script>
import { videoPlayInfo } from '@/services/course.js'

export default {
  name: 'course-video',
  components: {},
  props: {
    lessonId: {
      type: [String, Number],
      require: true
    }
  },
  data () {
    return {
    }
  },
  methods: {
    async loadVideoInfo () {
      const { data } = await videoPlayInfo({
        lessonId: this.lessonId
      })
      console.log(data)
      // 初始化播放器
      const player = new window.Aliplayer({
        id: 'player-con', // 视频元素id
        vid: data.content.fileId,
        playauth: data.content.playAuth,
        qualitySort: 'asc',
        format: 'mp4',
        mediaType: 'video',
        width: '100%',
        height: '100%',
        autoplay: true,
        isLive: false,
        rePlay: false,
        playsinline: true,
        preload: true,
        controlBarVisibility: 'hover',
        useH5Prism: true
      }, player => {
        console.log('The player is created')
      })
      console.log(player)
    }
  },
  created () {
    console.log(this.lessonId)
    this.loadVideoInfo()
  }
}

</script>
<style scoped>
.course-video{
  height: 210px;
}
</style>
